<template>
  <div class="login-container">
      <el-form ref="loginForm" :model="loginForm"  :rules="rules" class="login-form" label-width="100px">
      <div class="title-container">
        <h3 class="title">系统登录</h3>
      </div>
      <el-form-item prop="email" label="用户名">
        <el-input v-model="loginForm.email"  autoComplete="on" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="loginForm.password" autoComplete="on" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" style="width:100%" @click="submitForm('loginForm')" v-loading.fullscreen.lock="fullscreenLoading">登录</el-button>
      </el-form-item>
</el-form>
  </div>
</template>
<script>
import axios from 'axios'
import {Login, userUrl} from '../../config/config'
import {mapActions} from 'vuex'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        email: 'user1@test.com',
        password: '123456',
      },
      fullscreenLoading: false,
      rules: {
         email: [
             {required: true, message: '用户名是必须的', trigger: 'blur'},
             {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
         ],
         password: [
             {required: true, message: '密码是必须的', trigger: 'blur'}
         ] 
      },
      token: null
    }
  },
  methods: {
    ...mapActions([
      'login'
    ]),
    submitForm (formName) {
        this.$refs[formName].validate((valid) => {
        if (valid) {
            this.fullscreenLoading = true;
            axios.post(Login, this.loginForm)
            .then(response => {
              if(response.status === 200 && response.data.success) {
                this.fullscreenLoading = false;
                this.token = response.data.data.access_token;
                const headers = {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer' + this.token
                }
                axios.get(userUrl, { headers: headers })
                  .then(res => {
                    if(res.status === 200 && res.data.success) {
                      const authUser = {}
                      authUser.name = res.data.data.name
                      authUser.email = res.data.data.email
                      authUser.phone = res.data.data.phone
                      authUser.pre = res.data.data.pre
                      authUser.token = this.token
                      window.localStorage.setItem('authUser', JSON.stringify(authUser))
                      this.login(authUser)
                      this.$router.push({name: 'dashboard'})
                    }
                    if (response.data.status === 5000) {
                      this.fullscreenLoading = false
                      this.$message.error('出错啦🌶 请重试!')
                    }
                    console.log(res)
                  })
                  .catch((e) => {
                    this.fullscreenLoading = false
                    this.$message.error('出错啦🌶 用户名或密码错误, 请重试!')
                  })
      
              }
              console.log(response)
            })
            .catch((e) => {
              this.fullscreenLoading = false
              this.$message.error('用户名或密码错误, 请重试!')
            })
            // this.$router.push({name: 'dashboard'})
          alert('submit!');
        } else {
          return false;
        }
      });
    }
    
  }
}
</script>
<style>
  .login-container .el-form-item__label{
    color: #fff; 
  } 
</style>

<style lang="scss" scoped="" type="text/css">
  $bg:#2d3a4b;
  $light_gray:#eee;
  .login-container{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: $bg;
    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 520px;
      padding: 35px 35px 15px 35px;
      margin: 120px auto;
      box-sizing: border-box;
      
    }
    
    
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      font-weight: 400;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  
</style>
